<template>
  <div class="contrastBox">
      <!-- <table class="table" style="border-collapse: collapse;">
        <tr>
          <th>学生</th>
          <th>教师</th>
        </tr>
        <tr>
          <td>学生的检查所见</td>
          <td>教师批改的检查所见</td>
        </tr>
        <tr>
          <td colspan="2" >
            <div class="td" style="width:1300px">
              <code-diff :old-string="jcSjTxt" :new-string="checkSee" output-format="side-by-side"/>
            </div>
          </td>
        </tr>

        <tr>
          <td>学生的检查意见</td>
          <td>教师批改的检查意见</td>
        </tr>
        <tr>
            <td colspan="2">
               <div class="td" style="width:1300px"><code-diff :old-string="jcYjTxt" :new-string="checkOpinion" output-format="side-by-side"/></div>
            </td>
        </tr>

        <tr>
          <td>学生的检查技术</td>
          <td>教师的检查技术</td>
        </tr>
        <tr>
           <td colspan="2">
              <div class="td" style="width:1300px"><code-diff :old-string="jcReadyTxt" :new-string="checkReady" output-format="side-by-side"/></div>
           </td>
        </tr>

        <tr>
          <td>病史</td>
          <td>教师的检查准备</td>
        </tr>        
        <tr>
           <td colspan="2">
              <div class="td" style="width:1300px"><code-diff :old-string="jcProReadyTxt" :new-string="checkProRdady" output-format="side-by-side"/></div>
           </td>
        </tr>

         <tr>
          <td style="text-align:right">分数：<span style="margin-right:40px; font-size:18px">100</span></td>
          <td></td>
        </tr>        

      </table> -->

      <template>
        <el-tabs v-model="activeName" class="tabs">
          <!-- 检查所见 -->
            <el-tab-pane label="对比检查所见" name="first">
              <table class="table" style="border-collapse: collapse;">
                <tr>
                  <td style="padding-left:20px">学生检查所见</td>
                  <td style="padding-left:20px">教师批改的检查所见</td>
                </tr>
                <tr>
                  <td colspan="2" >
                    <div class="td" style="width:1300px">
                      <code-diff :old-string="studentReportInfoData.jcsYTxt" :new-string="studentReportInfoData.checkSee " output-format="side-by-side"/>
                    </div>
                  </td>
                </tr>     
              </table>
            </el-tab-pane>
            <!-- 检查意见 -->
            <el-tab-pane label="对比检查意见" name="second">
              <table class="table" style="border-collapse: collapse;">
                <tr>
                  <td style="padding-left:20px">学生的检查意见</td>
                  <td style="padding-left:20px">教师批改的检查意见</td>
                </tr>
                <tr>
                    <td colspan="2">
                      <div class="td" style="width:1300px"><code-diff :old-string="studentReportInfoData.jcYjTxt" :new-string="studentReportInfoData.checkOpinion" output-format="side-by-side"/></div>
                    </td>
                </tr>
              </table>
            </el-tab-pane>
            <!-- 检查意见 -->
            <el-tab-pane label="对比检查技术" name="third">
              <table class="table" style="border-collapse: collapse;">
                <tr>
                  <td style="padding-left:20px">学生的检查技术</td>
                  <td style="padding-left:20px">教师的检查技术</td>
                </tr>
                <tr>
                  <td colspan="2">
                      <div class="td" style="width:1300px"><code-diff :old-string="studentReportInfoData.jcReadyTxt" :new-string="studentReportInfoData.checkReady" output-format="side-by-side"/></div>
                  </td>
                </tr>
              </table>
            </el-tab-pane>

            <!-- 病史 -->
            <el-tab-pane label="病史" name="fourth">
               <table class="table" style="border-collapse: collapse;">
                  <tr>
                    <td style="padding-left:20px">病史</td>
                    <td style="padding-left:20px">教师的检查准备</td>
                  </tr>        
                  <tr>
                    <td colspan="2">
                        <div class="td" style="width:1300px"><code-diff :old-string="studentReportInfoData.jcProReadyTxt" :new-string="studentReportInfoData.checkProRdady" output-format="side-by-side"/></div>
                    </td>
                  </tr>
              </table>
            </el-tab-pane>

            <!-- 分数 -->
            <el-tab-pane label="学生报告及分数" name="score">
              <div class="scoreContent" v-for="(item,index) in studenData" :key="index">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>{{item.title}}</span>
                    </div>
                    <div class="content">
                      {{item.content}}
                    </div>
                </el-card>
              </div>

              <div class="score clf">
                <div class="score2">分数:100</div>
              </div>
            </el-tab-pane>
            
        </el-tabs>

      <el-button type="primary" @click="$router.go(-1)" style="margin:20px 0px;float:right">返回</el-button>

      </template>

  </div>
</template>

<script>
import {CodeDiff} from 'v-code-diff'
import { getCompareData } from "@/api/report"
import { Loading } from 'element-ui';
export default {
  name: 'App',
  components: {
    CodeDiff
  },
  data(){
    return{
      activeName: 'first',
      studentReportInfoData:{}, //获取老师学生报告信息,
      loading:true,//动画,
      score:null,

      // 分数及学生检查
      studenData:[],
    }
  },
    mounted() {
      this.loading = Loading.service({
        lock:true,
        text:"加载中...",
        background:'rgba(0,0,0,0.7)'
      });
      let { reportId } = this.$route.query;
      this.getStudentReportInfoData(reportId);
  },
  methods:{
    // 获取老师和学生报告数据
    async getStudentReportInfoData(reportId){
      let data = await getCompareData(reportId);
      this.studentReportInfoData = data.data;
      this.loading.close();

      // this.score = score;

      // // 分数及学生报告
      let studenTitle = ["检查所见","检查意见","检查技术","病史"];
      let { jcsYTxt, jcYjTxt, jcReadyTxt, jcProReadyTxt} = this.studentReportInfoData;
      let studenContent = [ jcsYTxt, jcYjTxt, jcReadyTxt, jcProReadyTxt];
      let newArr = [];
      studenTitle.forEach((item,index) =>{
        let obj = {};
        obj.title = item;
        obj.content = studenContent[index];
        newArr.push(obj);
      })
      this.studenData = newArr;

    },
  }
}
</script>
<style lang="scss" scoped>
  .contrastBox{
    width: 1300px;
    margin: 0 auto;
    .table{
      width: 1300px;
      margin: 0 auto;
      th,td{
        width: 650px;
        padding: 10px 0px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }
      td:nth-child(2n-1), th:nth-child(2n-1){
        border-right: 1px solid rgba(0, 0, 0, 0.1);
      }

    }
  }

  
.tabs{
  width: 1360px;
  margin: 30px  auto 0 auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  ::v-deep .el-tabs__nav-scroll,::v-deep .el-tabs__content{
      padding:0 30px;
  }
}
//分数
.text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 480px;
  }
  .score{
    width: 100%;
    span{
      float: right;
    }
  }
::v-deep .el-card.box-card.is-always-shadow{
  width: 100%;
}
  // 插件样式
  ::v-deep .hljs-attribute,::v-deep .hljs-number, ::v-deep .d2h-wrapper .hljs{
    font-size: 14px !important;
  }
  ::v-deep .d2h-file-side-diff{
    overflow: hidden;
    margin: 0px;
  }

   ::v-deep .d2h-info .d2h-code-side-line ,
   ::v-deep .d2h-code-line-prefix{
    display: none;
  }

  .td ::v-deep tr:nth-of-type(1){
    display: none;
  }

  ::v-deep .d2h-del, 
  ::v-deep .d2h-ins, 
  ::v-deep .d2h-file-wrapper,
  ::v-deep .d2h-code-side-linenumber {
    border: none;
  }

  ::v-deep .d2h-diff-table{
    font-size: 14px;
  }

  ::v-deep .d2h-diff-table td{
    height: 30px;
    line-height: 30px;
    color: #606266;
  }

  ::v-deep .d2h-diff-table{
    font-size: 16px;
  }
  
  ::v-deep .d2h-code-side-linenumber, ::v-deep .d2h-ins d2h-change{
    font-size: 0;
  }
  ::v-deep .d2h-code-side-line{
    padding:0;
  }

::v-deep .d2h-code-side-line{
  padding:0 10px;
}


::v-deep .d2h-code-line-ctn.hljs {
  word-break: normal ;
  width: auto ;
  display: block ;
  white-space: pre-wrap ;
  word-wrap: break-word ;
  overflow: hidden ;
}
 .clf::after{
    content: "";
    display: block;
    clear: both;
  }

.scoreContent{
    margin-top: 20px;
}

.score{
  width: 100%;
  margin: 20px 0;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  .score2{
    font-size: 20px;
    float: right;
    padding: 20px 0;
    margin-right: 100px;
  }
}
.scoreContent{
  .content{
    line-height: 30px;
  }
}
 ::v-deep .el-tabs__nav{
  padding: 10px 0px;
}
</style>